<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>air</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">

<link rel="stylesheet" href="http://g.alicdn.com/msui/sm/0.6.1/css/sm.min.css">
<link rel="stylesheet" type="text/css" href="css/global.css" />
<link rel="stylesheet" type="text/css" href="css/air.css" />
</head>

<body>

<header class="bar_t bar-nav">
  <h1 class="title">空气质量</h1>
  <span id="back" class="f16 ml10"><i></i>返回</span>
</header>
<div class="whitebg mb5">
  <div class="card-container">
    <div class="x-wcard">
      <div class="card-content">
        <div class="kqzsTit f16 pt10 pl10">
        上海空气质量指数 <i class="mri_xq f14" id="tomorrow">明日详情</i>
        </div>
        <div class="card-content-inner f14">
          <div class="opacity_num c02 tc">
            <em class="f38">54</em>
            <i>空气质量良</i>
          </div>
          <div class="wenx_info">温馨提示：敏感体质的朋友要减少外出</div>
          <div class="remindarea clearfix f12">
            <ul>
              <li> <i class="aqi-ricon1"></i>
                <div class="remindinfo">
                  <p class="c_red">不用佩戴口罩</p>
                </div>
              </li>
              <li> <i class="aqi-ricon2"></i>
                <div class="remindinfo">
                  <p class="green">适宜运动</p>
                </div>
              </li>
              <li>
                <i class="aqi-ricon3"></i>
                <div class="remindinfo">
                  <p class="green">适宜外出</p>
                </div>
              </li>
              <li class="mr0">
                <i class="aqi-ricon4"></i>
                <div class="remindinfo">
                  <p class="green">适宜开窗</p>
                </div>
              </li>
            </ul>
          </div>

        </div>
      </div>
    </div>
  </div>
</div>
<div class="whitebg mb5">
  <div class="card-container">
    <div class="x-wcard">
      <div class="card-content">
        <div class="kqzsTit f16 pt10 pl10">主要污染物</div>
        <div class="card-content-inner f14">
          <div class="pollution">
            <ul>
              <li>
                <div class="wr-name"><span>PM2.5</span><i>(可入肺颗粒物)</i></div>
                <div class="wr-danwei"><span>86</span><i>μg/m³</i></div>
              </li>
              <li>
                <div class="wr-name"><span>PM10</span><i>(可吸入颗粒物)</i></div>
                <div class="wr-danwei"><span>86</span><i>μg/m³</i></div>
              </li>
              <li>
                <div class="wr-name"><span>SO2</span><i>(二氧化硫)</i></div>
                <div class="wr-danwei"><span>86</span><i>μg/m³</i></div>
              </li>
              <li>
                <div class="wr-name"><span>NO2</span><i>(二氧化碳)</i></div>
                <div class="wr-danwei"><span>86</span><i>μg/m³</i></div>
              </li>
              <li>
                <div class="wr-name"><span>CO</span><i>(一氧化碳)</i></div>
                <div class="wr-danwei"><span>86</span><i>μg/m³</i></div>
              </li>
              <li>
                <div class="wr-name"><span>O3</span><i>(臭氧)</i></div>
                <div class="wr-danwei"><span>86</span><i>μg/m³</i></div>
              </li>
          </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="whitebg mb5">
  <div class="card-container">
    <div class="x-wcard">
      <div class="card-content">
        <div class="kqzsTit f16 pt10 pl10">上海5天空气质量指数预报</div>
        <div class="table-data f14">
          <table>
            <thead>
              <tr>
                <th class="date tl pl10">
                 日期
                </th>
                <th>
                 空气质量等级
                </th>
                <th class="tr pr10">
                  空气质量指数
                </th>
              </tr>
            </thead>
            <tbody>
              <tr class="active default-click">
                <td class="item-l">
                  05月16日(
                  <span>今天</span>
                  )
                </td>
                <td class="tc"> <i class="c02">良</i></td>
                <td class="tc item-r">71</td>
              </tr>
              <tr class="active default-click">
                <td class="item-l">
                  05月17日(
                  <span>明天</span>
                  )
                </td>
                <td class="tc"> <i class="c02">良</i></td>
                <td class="tc item-r">63</td>
              </tr>
              <tr class="active default-click">
                <td class="item-l">
                  05月18日(
                  <span class="yellow">周六</span>
                  )
                </td>
                <td class="tc">
                  <i class="c02">良</i></td>
                <td class="tc item-r">56</td>
              </tr>
              <tr class="active default-click">
                <td class="item-l">
                  05月19日(
                  <span class="yellow">周日</span>
                  )
                </td>
                <td class="tc">
                  <i class="c02">良</i></td>
                <td class="tc item-r">61</td>
              </tr>
              <tr class="active default-click">
                <td class="item-l">
                  05月20日(
                  <span>周一</span>
                  )
                </td>
               <td class="tc">
                  <i class="c01">优</i></td>
                <td class="tc item-r">46</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="whitebg mb5">
  <div class="card-container">
    <div class="x-wcard">
      <div class="card-content">
        <div class="kqzsTit f16 pt10 pl10">上海各监测站点实时数据</div>
        <div class="table-data f14">
          <table>
            <thead>
              <tr>
                <th class="tl pl10 bianhao">
                  编号
                </th>
                <th class="tl pl10 zhandian">
                  检测站点
                </th>
                <th class="zhiliang">
                  质量
                </th>
                <th class="tc pr10 nongdu">
                 PM2.5浓度
                </th>
              </tr>
            </thead>
            <tbody>
              <tr class="active default-click">
                <td>1</td>
                <td class="tl">十五厂</td>
                <td class="tc"><i class="c02">良</i></td>
                <td class="tc">64ug/m³</td>
              </tr>
              <tr class="active default-click">
                <td>2</td>
                <td class="tl">徐汇上师大</td>
                <td class="tc"><i class="c02">良</i></td>
                <td class="tc">64ug/m³</td>
              </tr>
              <tr class="active default-click">
                <td >3</td>
                <td class="tl">青浦淀山湖</td>
                <td class="tc"> <i class="c02">良</i>
                </td>
                <td class="tc nongdu">64ug/m³</td>
              </tr>
              <tr class="active default-click">
                <td>4</td>
                <td class="tl">浦东川沙</td>
                <td class="tc"><i class="c02">良</i></td>
                <td class="tc">64ug/m³</td>
              </tr>
              <tr class="active default-click">
                <td>5</td>
                <td class="tl">浦东张江</td>
                <td class="tc"> <i class="c02">良</i></td>
                <td class="tc">64ug/m³</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="whitebg mb5">
  <div class="card-container">
    <div class="x-wcard">
      <div class="card-content">
        <div class="kqzsTit f16 pt10 pl10">上海周边空气质量指数</div>
        <div class="zhishu f14 pb10">
            <ul>
              <li><span class="quyu">徐汇</span><span class="op_pm">pm2.5</span><span class="op_lev pl20 c02">空气良</span></li>
              <li><span class="quyu">徐汇</span><span class="op_pm">pm2.5</span><span class="op_lev pl20 c02">空气良</span></li>
              <li><span class="quyu">徐汇</span><span class="op_pm">pm2.5</span><span class="op_lev pl20 c02">空气良</span></li>
              <li><span class="quyu">徐汇</span><span class="op_pm">pm2.5</span><span class="op_lev pl20 c02">空气良</span></li>
              <li><span class="quyu">徐汇</span><span class="op_pm">pm2.5</span><span class="op_lev pl20 c02">空气良</span></li>
              <li><span class="quyu">徐汇</span><span class="op_pm">pm2.5</span><span class="op_lev pl20 c02">空气良</span></li>
              <li><span class="quyu">徐汇</span><span class="op_pm">pm2.5</span><span class="op_lev pl20 c02">空气良</span></li>
              <li><span class="quyu">徐汇</span><span class="op_pm">pm2.5</span><span class="op_lev pl20 c02">空气良</span></li>
            </ul>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="whitebg mb5">
  <div class="card-container">
    <div class="x-wcard">
      <div class="card-content">
        <div class="kqzsTit f16 pt10 pl10">空气质量小知识</div>
        <div class="card-content-inner f14">
          <div class="zhili">
            <span class="f15">1. 什么是PM2.5和PM10？</span>
            <p>
              PM2.5是指大气中直径小于或等于2.5微米的颗粒物，也称为可入肺颗粒物。被吸入人体后会直接进入支气管，干扰肺部的气体交换，引发哮喘、支气管炎等方面的疾病。PM10是直径小于等于10微米的可吸入颗粒物，能够进入上呼吸道，但部分可通过痰液等排出体外，另外也会被鼻腔内部的绒毛阻挡，对人体健康危害相对较小。
            </p>
            <span class="f15">2. N90和N95防护口罩的区别？</span>
            <p>一般PM2.5口罩分为3个等级，90%、95%、99%，防护等级越高。N90可过滤90%的PM2.5，N95可过滤95%的PM2.5。等级越高相对呼吸也越困难。N90可基本满足需求。</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="login-area pt10" id="footer">
  <div class="copyright">Copyright © 2016 tianqi321.com 版权所有 </div>
</div>
<script type='text/javascript' src='http://g.alicdn.com/sj/lib/zepto/zepto.min.js' charset='utf-8'></script>
<script type='text/javascript' src='http://g.alicdn.com/msui/sm/0.6.2/js/sm.min.js' charset='utf-8'></script>
</body>
</html>